<template>
	<view style="padding: 16rpx;">
		<uni-grid :column="3" borderColor="#f1f1f1">
			<uni-grid-item
				v-for="item in navData"
				:key="item.title"
				@tap="showDemo(item.url)"
			>
				<view style="height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
					<uni-icons :type="item.icon" size="30"></uni-icons>
					<view style="padding-top: 24rpx;">{{ item.title }}</view>
				</view>
			</uni-grid-item>
		</uni-grid>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navData: [
				    { title: 'UI库', url: '/pages/demo/ui-frame/index', icon: 'color' },
				    { title: '配置管理', url: '/pages/demo/config-mgr/index', icon: 'gear' },
				    { title: '常量定义', url: '/pages/demo/constant-def/index', icon: 'list' },
				    { title: '操作反馈', url: '/pages/demo/feedback/index', icon: 'checkmarkempty' },
				    { title: '事件总线', url: '/pages/demo/event-bus/index', icon: 'fire' },
				    { title: 'API定义', url: '/pages/demo/api-def/index', icon: 'link' },
				    { title: '统一请求工具', url: '/pages/demo/request-tool/index', icon: 'tune' },
				    { title: '模拟请求工具', url: '/pages/demo/request-mock/index', icon: 'upload' },
				    { title: '缓存工具', url: '/pages/demo/cache-tool/index', icon: 'shop' },
				]
			}
		},
		onLoad() {

		},
		methods: {
			showDemo (url) {
				uni.navigateTo({ url })
			}
		}
	}
</script>

<style></style>
